// 项目的根组件，一切组件的根基
// App被引入到了index.js,渲染到public/index.html文件中id为root的div

import { useState } from "react"

// 子传父
// 核心：在子组件中调用父组件中的函数并传递参数

// 子组件接收父组件函数，调用父组件函数，并传递参数
function Son({onGetSonMsg}) {
  // Son组件中的数据
  const sonMsg = 'this is son msg'
  return (
    <div>
      this is son
      <button onClick={() => onGetSonMsg(sonMsg)}>sendMsg</button>
    </div>
  )
}

function App14() {
  const [msg, setMsg] = useState('')
  // 父组件定义函数，传递给子组件
  const getMsg = (msg) => {
    console.log(msg)
    setMsg(msg)
  }
  return (
    <div className="App">
      this is App {msg}
      <Son onGetSonMsg = {getMsg}></Son>
    </div>
  )
}

export default App14
